<template>
  <!-- AI提醒推荐 -->
  <div class="bg bg1">

    <div class="menus" v-if="orderType">
      <div class='frame bg2' @click="typeClick">
        <text class="font28 text2 text-line1" style="max-width:300px">{{T(type)}}</text>
        <LImage class="img-arrow-down" :src="Config.img('xiala.png')"></LImage>
      </div>
      <div class="width26"></div>
      <div class='frame bg2' @click="orderTypeClick">
        <text class="font28 text2 text-line1" style="max-width:300px">{{T(orderType)}}</text>
        <LImage class="img-arrow-down" :src="Config.img('xiala.png')"></LImage>
      </div>
    </div>

    <list class="list" :loadmoreoffset="50" @loadmore="loadMore" ref="list">
      <!-- 刷新 -->
      <refresh class="refresh" @refresh="refresh" :display="isRefresh ? 'show' : 'hide'">
        <loading-indicator class="load text2"></loading-indicator>
      </refresh>

      <cell>
        <VAiCell v-for="(item, index) in indicatorList" :key="index" :item="item" @addAi="addAi" />
        <!-- 无更多数据 -->
        <div class="genduo" v-if="pageMax">
          <text class="font22 text3">{{T('没有更多数据')}}</text>
        </div>
      </cell>

    </list>

  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .list {
    width: 750px;
    margin-top: 2px;
  }
  .bg {
    width: 750px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px;
    box-sizing: border-box;
  }
  .menus {
    height: 80px;
    margin-top: 17px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .frame {
    height: 80px;
    flex: 1;
    border-radius: 4px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .refresh {
    width: 690px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .load {
    margin-top: 16px;
    height: 40px;
    width: 40px;
  }
  .genduo {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 690px;
    height: 100px;
  }
  .img-arrow-down {
    width: 20px;
    height: 16px;
    color: white;
    margin-left: 20px;
  }
</style>

<script>
  import VAiCell from "@/aide/view/VAiCell.vue";

  import jconfig from "@/_js/config";
  import jmodal from "@/_js/modal";
  import jdebug from "@/_js/debug";
  import jhttps from "@/_js/https";
  import jnavigator from "@/_js/navigator";
  const clipboard = weex.requireModule("clipboard");

  const animation = weex.requireModule("animation"); //动画
  const domModule = weex.requireModule("dom");
  const stream = weex.requireModule("stream"); //网络请求
  const weexFunction = weex.requireModule("WeexFunction");
  import I18N from "@/_i18n/i18n";
  var T = I18N.t;
  weexFunction.setTitle(T("AI指标推荐"));
  export default {
    components: {
      VAiCell,
    },

    data() {
      return {
        Config: jconfig,
        T: T,
        pageNo: 1, //页码
        isRefresh: false, //显示刷新
        pageMax: false, //turn最大页面
        isLoadinging: false, //显示加载
        // ///过滤类型
        // type: "全部",
        // types: ["全部", "震荡指标", "趋势指标"],
        // typex: { 全部: "", 震荡指标: "volatility", 趋势指标: "trend" },
        // ///排序类型
        // orderType: "最高盈利",
        // orderTypes: ["最高盈利", "信号频率", "使用次数"],
        // orderTypex: {
        //   最高盈利: "profit",
        //   信号频率: "frequency",
        //   使用次数: "usageCount",
        // },
        type: "全部",
        types: null,
        orderType: null,
        orderTypes: null,
        indicatorList: [],
      };
    },

    created() {},

    mounted() {
      this.fetchType();
    },

    methods: {
      /********************************** HTTPS*/
      fetchType() {
        let param = {};
        jmodal.showLoad();
        jhttps.post("indicator/queryRecommendTypeList", param, true, (data) => {
          let typeList = data.data.typeList;
          this.types = ["全部", ...typeList];
          let frequencyList = data.data.frequencyList;
          this.orderTypes = ["全部", ...frequencyList];
          this.orderType = this.orderTypes[0];
          this.refresh();
        });
      },
      //https AI首页
      refresh() {
        if (this.isRefresh || this.isLoadinging) return;
        this.isRefresh = true;
        var param = {
          pageNo: 1,
          pageSize: 20,
          // type: this.typex[this.type],
          // frequency: this.orderTypex[this.orderType],
          type: this.type == "全部" ? "" : this.type,
          frequency: this.orderType == "全部" ? "" : this.orderType,
        };
        jhttps.post(
          "indicator/queryRecommendIndicatorList",
          param,
          true,
          (data) => {
            jmodal.hideLoad();
            this.isRefresh = false;
            if (data.status == 200) {
              this.indicatorList = data.data.indicatorList;
              this.pageNo = 2;
              this.pageMax = data.data.indicatorList.length < 20;
              if (!this.pageMax) {
                this.$refs.list.resetLoadmore();
              }
            } else {
              jmodal.toast(data.msg);
            }
          }
        );
      },

      loadMore() {
        if (this.pageMax || this.isRefresh || this.isLoadinging) return;
        this.isLoadinging = true;

        var param = {
          pageNo: this.pageNo,
          pageSize: 20,
          // type: this.typex[this.type],
          // orderType: this.orderTypex[this.orderType],
          type: this.type == "全部" ? "" : this.type,
          frequency: this.orderType == "全部" ? "" : this.orderType,
        };
        jhttps.post(
          "indicator/queryRecommendIndicatorList",
          param,
          true,
          (data) => {
            this.isLoadinging = false;
            if (data.status == 200) {
              let indicatorList = data.data.indicatorList;
              this.indicatorList.push(...indicatorList);
              this.pageNo++;
              this.pageMax = data.data.indicatorList.length < 20;
              if (!this.pageMax) {
                this.$refs.list.resetLoadmore();
              }
            } else {
              jmodal.toast(data.msg);
            }
          }
        );
      },

      /********************************** 点击*/
      //过滤类型
      typeClick() {
        var types = [];
        var typed = {};
        for (let index = 0; index < this.types.length; index++) {
          var value = this.types[index];
          typed[T(value)] = index;
          types.push(T(value));
        }
        jmodal.actionSheet(types, T(this.type), (value) => {
          if (T(this.type) == value) return;
          var index = typed[value];
          this.type = this.types[index];
          this.refresh();
        });
      },
      orderTypeClick() {
        var orderTypes = [];
        var orderTyped = {};
        for (let index = 0; index < this.orderTypes.length; index++) {
          var value = this.orderTypes[index];
          orderTyped[T(value)] = index;
          orderTypes.push(T(value));
        }
        jmodal.actionSheet(orderTypes, T(this.orderType), (value) => {
          if (T(this.orderType) == value) return;
          var index = orderTyped[value];
          this.orderType = this.orderTypes[index];
          this.refresh();
        });
      },
      //添加AI指标
      addAi(item) {
        jnavigator.open("", "aide/indicatorAlert", {
          type: "indicator",
          indicatorId: item.indicatorId,
          pageRef: "add",
        });
      },
    },
  };
</script>